<template>
    <BasicTable ref="tableRef" :params="params" :columns="columns" :query="query" box-type="radio" @select-change="onSelectChange">
        <template #form>
            <a-form-item label="职务名称" name="name">
                <a-input v-model:value="params.name" placeholder="请输入职务名称" />
            </a-form-item>
        </template>
        <template #button>
            <a-button v-permission="'system:term:add'" type="primary" @click="open(modalRef)">
                <template #icon>
                    <PlusOutlined />
                </template>
                新增
            </a-button>
        </template>
        <template #table="{ body }">
            <template v-if="body.column.key === 'status'">
                <Switch v-model:checked="body.record.status" @change="switchChange(updateStatus, body.record.id, $event)" />
            </template>
            <template v-if="body.column.key === 'action'">
                <a-button v-permission="'system:term:edit'" type="link" @click="open(modalRef, body.record)">
                    <template #icon>
                        <EditOutlined />
                    </template>
                    编辑
                </a-button>
                <a-popconfirm title="确定要删除吗?" @confirm="del(deleteById, body.record.id, tableRef)">
                    <a-button v-permission="'system:term:delete'" type="link">
                        <template #icon>
                            <DeleteOutlined />
                        </template>
                        删除
                    </a-button>
                </a-popconfirm>
            </template>
        </template>
    </BasicTable>
    <Modal ref="modalRef" @close="refresh(tableRef)" />
</template>
<script setup>
import { ref, reactive } from 'vue'
import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue'
import { query, deleteById, updateStatus } from '/@/api/System/Team'
import { useBasicTable } from '@iframe/tools/mixins/BasicTableMixins'
import { Switch, BasicTable } from '@iframe/tools/components'
import Modal from './Modal.vue'

const { refresh, del, open, switchChange } = useBasicTable()
const emits = defineEmits(['select'])

const tableRef = ref()
const modalRef = ref()
const params = reactive({
    code: null,
    name: null
})

const onSelectChange = selectKeys => {
    emits('select', selectKeys)
}

const columns = [
    {
        title: '团队名称',
        dataIndex: 'name',
        key: 'name'
    },
    {
        title: '团队描述',
        dataIndex: 'des',
        key: 'des'
    },
    {
        title: '状态',
        dataIndex: 'status',
        key: 'status',
        align: 'center',
        width: 100
    },
    {
        title: '操作',
        key: 'action',
        align: 'center',
        width: 200
    }
]
</script>
